<template>
	<view class="container">
		<view class="evaluate-box">
			商品评价：<up-rate count="5" active-color="#F4BD4E" size="30" v-model="value"></up-rate>
		</view>
		<up-textarea class="text" v-model="value1" placeholder="说说您对商品的想法吧..." border="none"></up-textarea>
		<up-upload
			:fileList="fileList"
			@afterRead="afterRead"
			@delete="deletePic"
			name="6"
			multiple
			:maxCount="1"
			width="250"
			height="150"
		>
			<view class="uploadbox">
				<up-icon name="camera" size="24"></up-icon>
				添加图片
			</view>
		</up-upload>
		<view class="span">
			您的评价内容在商品页面将会被匿名展示
		</view>
		<img class="img" src="" alt="" />
		<view class="span">
			<span style="font-weight: 500;color:#3D3D3D">
				宝贝信息
			</span>(杞滋堂国潮枸杞原浆宁夏中宁枸杞子原浆....)
		</view>
		
		<view class="btn">
			发布
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList:[],
				value:'',
				value1:''
			}
		},
		methods:{
			// 删除图片
			deletePic(event){
			  this.fileList.value.splice(event.index, 1);
			},
			
			// 新增图片
			async afterRead(event){
			  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			  let lists = [].concat(event.file);
			  let fileListLen = this.fileList.value.length;
			  lists.map((item) => {
			    this.fileList.value.push({
			      ...item,
			      status: 'uploading',
			      message: '上传中',
			    });
			  });
			  for (let i = 0; i < lists.length; i++) {
			    const result = this.uploadFilePromise(lists[i].url);
			    let item = this.fileList.value[fileListLen];
			    this.fileList.value.splice(fileListLen, 1, {
			      ...item,
			      status: 'success',
			      message: '',
			      url: result,
			    });
			    fileListLen++;
			  }
			},
			uploadFilePromise (url){
			  return new Promise((resolve, reject) => {
			    let a = uni.uploadFile({
			      url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
			      filePath: url,
			      name: 'file',
			      formData: {
			        user: 'test',
			      },
			      success: (res) => {
			        setTimeout(() => {
			          resolve(res.data.data);
			        }, 1000);
			      },
			    });
			  });
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F8F9FA;
	}
	.container{
		border-radius: 20px;
		background-color: #fff;
		padding: 32rpx;
		box-sizing: border-box;
		.evaluate-box{
		@include flex(row);
		align-items: center;
		}
		.text{
			width: 100%;
			min-height: 280rpx;
			margin: 40rpx auto;
			font-size: 28rpx;
		}
		.uploadbox{
			width: 688rpx;
			height: 212rpx;
			border-radius: 20rpx;
			opacity: 1;
			margin: 0 auto;
			background: #F7F7F7;
			@include flex(column);
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
		}
		.span{
			font-size: 24rpx;
			font-weight: normal;
			margin-top: 10rpx;
			letter-spacing: 0em;
			
			font-feature-settings: "kern" on;
			color: #999999;
		}
		.img{
			width: 50rpx;
			height: 50rpx;
			opacity: 1;
			border-radius: 50%;
			box-sizing: border-box;
			border: 1rpx solid #EEEEEE;
			margin: 20rpx 0;
		}
		.btn{
			position: fixed;
			  left: 30rpx;
			  right: 30rpx;
			  bottom: 16rpx;
			  z-index: 95;
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  width: 690rpx;
			  height: 88rpx;
			  border-radius: 200rpx;
			  opacity: 1;
			  background: #08AFFE;
			  border: 0px solid #08AFFE;
			  font-size: 32rpx;
			  color: #fff;
		}
	}
	
</style>